/*重置样式*/
*{
    margin: 0px;
    padding: 0px;
    box-sizing:border-box;
    font-family:Helvetica,STHeiti STXihei,Microsoft Yahei,Tohoma,Arial;                    
}
li,ul,ol{
    list-style: none;
    transform:translateZ(0);
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
         -o-transform: translateZ(0);
            transform: translateZ(0);  
}
a{
    text-decoration: none;
    outline:none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

html {
    height: 100%;
}

body {
    font-family: Helvetica Neue,Helvetica,STHeiTi,sans-serif;
    line-height: 1;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    color: #000;
}


/*公共的头文件*/
/*头部文件*/
.home_title{
    background:#2FAE85;
    height: 2.1rem;
    width:16rem;
    line-height: 2.1rem;
    text-align: center;
    padding:0 .4rem;
}
.home_title a{
    display:block;
    width:7.331rem;
    margin:0 auto;
    height:2rem;
}
.home_title a img{
    height:2rem;
    display:block;
}
.home_nav_ul{
    width:16rem;
    height:2.2rem;
    background:#F8F8F8;
    display:flex;
    justify-content:space-between;
    align-items: center;
    padding:0 .4rem;
}
.home_nav_ul li{
    width:3.04rem;
    height:100%;
    float: left;
}
.home_nav_ul li>a{
    display:block;
    color:#3b3b3b;
    line-height: 2.2rem;
    text-align: center;
    color:#3b3b3b;
    font-size: .7rem;
    position:relative;
}
/*鼠标点击特效*/
.home_nav_ul li .header_activate{
    color:#2FAE85;
}
.header_activate::after{
    content:"";
    position:absolute;
    background:#2FAE85;
    width:1.6rem;
    height:.15rem;
    left: .7rem;
    bottom:.3rem;
}
/*滚动后的效果*/
.nav_roll{
    position: fixed;
    z-index:9999;
    top:0;
}
/*卡片样式*/
.Box{
    background:#fff;
    width:16rem;
    margin-bottom: .2rem;
}
/*用户名头像*/
.content_top{
    width:16rem;
    height:2.2rem;
}
.content_user{
    height:1.45rem;
    margin:0 .75rem;
    margin-top: .3rem;
    padding-top: .3rem;
    width:14.5rem;
}
/*头像*/
.content_img{
    float: left;
    width:1.45rem;
    height:1.45rem;
    border-radius: 50%;
    background:url(../img/icon.jpg) no-repeat center;
    background-size: 1.45rem;
}
/*用户名*/
.content_name{
    float:left;
    width:9rem;
    height:1.45rem;
    line-height:1.45rem;
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space: nowrap;/*强制不换行*/
    font-size: .6rem;
    color:#8f8f8f;
    padding-left: .3rem;
}
.content_name>p{
    height:.6rem;
}
/*内容*/
.content_text{
    width:16rem;
    padding:0 .71rem;
    margin-bottom:.36rem;
}
.content_text>p{
    color:#242424;
    font-size:.68rem;
    line-height: 1rem;
}
.content_type{
   overflow:hidden;
   margin-bottom: .2rem;
}
/*点赞*/
.content_bottom{
     width:16rem;
     height:1.6rem;
     background:#fff;
}
.content_bottom li{
    float:left;
    width:5rem;
    padding:0 .5rem;
    height:1.6rem;
    text-align: center;
}
.content_bottom li a{
    display:inline-block;
    height:1.6rem;
    padding:0 auto;
}
.content_bottom li span{
    float:left;
    height:1.6rem;
    color:#999;
    line-height: 1.7rem;
    text-align: left;
    font-size: .5rem;
}
.content_bottom li .icon{
    float:left;
    width:1.3rem;
    height:1.6rem;
    background:url(../img/zan0.png) no-repeat center;
    background-size: .8rem;
}
.content_bottom li:nth-of-type(2) .icon{
    background-image:url(../img/xu0.png);
}
.content_bottom li:nth-of-type(3) .icon{
    background-image:url(../img/pinglun.png);
}
.content_talk{
    margin-top: .3rem;
}
/*视频*/
.content_video{
    width:16rem;
    padding:0 .5rem;
    position:relative;
    display:block;
}
.content_box{
    width:15rem;
    position:relative;
}
.video_box img{
    display:block;
    width:15rem;
    border:none;
}
/*视频按钮*/
.play_btn{
    position: absolute; 
    width:2.7rem;
    height:2.7rem;
    background:url(../img/paly.png);
    background-size: 2.7rem;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto; 
}
.video_data{
    position: absolute;
    bottom:0rem;
    height:2.25rem;
    width:15rem;
    padding:0 .4rem;
    color:#fff;
}
/*外框样式*/
.video_round{
    background:rgba(0,0,0,.5);
    float:left;
    margin-top: .8rem;
    height:.8rem;
    padding:0 .4rem;
    line-height: .85rem;
    border-radius: .5rem;
    font-size: .5rem;
}
.video_time{
    float:right;
}
/*视频*/
.video_player{
    width:15rem;
    position:absolute;
    top: 0;
    visibility:hidden;
    z-index: 3;
}
.video_player video{
    display:block;
    width:15rem;
}


/*gif图片*/
.content_pic{
    position:relative;
    width:15rem;
    padding:0 .5rem;
}
/*图片按钮*/
.content_pic>img{
    width:15rem;
    display:block;
}
.gif_btn{
    width:2.25rem;
    height:2.25rem;
    position:absolute;
    background:url(../img/gif.png) no-repeat center;
    background-size: 2.25rem;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto; 
}



/*顶部弹框，用固定定位*/
.bouncedTop{
    width:16rem;
    background:#2FAE80;
    position:fixed;
    font-size: .6rem;
    z-index:3;
    top:4.3rem;
    height:1.4rem;
    line-height: 1.4rem;
    text-align:center;
    color:#fff; 
    -webkit-animation: fadeIn 2s  0s 1;
    -o-animation: fadeIn 2s  0s 1;
    animation: fadeIn 2s  0s 1;
}
@-webkit-keyframes fadeIn {
   0% {
        opacity:0;
     }
    50% {
        opacity:1;
    }
    50% {
        opacity: 1;    
    }
    100% {
        opacity:0;
    }
}



/*懒加载样式*/
.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: .6rem;
    /* 开启硬件加速 */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.dropload-down{
    height: 2.5rem;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
    height: 1rem;
    line-height: 1rem;
    text-align: center;
}
.dropload-load .loading{
    display: inline-block;
    height: 0.75rem;
    width: 0.75rem;
    background:url(../img/refresh.png) no-repeat center;
    background-size: .75rem;
    border-radius: 100%;
    margin: .3rem;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*锚点链接*/
.bottom_anchor{
    width:2.2rem;
    height:2.2rem;
    position:fixed;
    z-index: 6;
    bottom:0;
    bottom: 1rem;
    right: 1rem;
    -webkit-animation: fadeIn 1s  0s 1;
    -o-animation: fadeIn 1s  0s 1;
    animation: fadeIn 1s  0s 1;
}
@-webkit-keyframes fadeIn {
    0% {
    opacity: 0; /*初始状态 透明度为0*/
    }
    20% {
    opacity: .3; /*中间状态 透明度为0*/
    }
    100% {
    opacity: 1; /*结尾状态 透明度为1*/
    }
}
.bottom_anchor a{ 
    margin-top: .5rem;
    display:block;
    background:url(../img/back_top.png) no-repeat center;         
    background-size: 2.2rem;
    height:2.2rem;
    width:2.2rem;
}
.main>div>ul{
    background-color:#EEE;
}
/*刷新旋转*/
.refresh{
        -webkit-transform: rotate(360deg);
        animation: rotation .7s linear infinite;
        -moz-animation: rotation .7s linear infinite;
        -webkit-animation: rotation .7s linear infinite;
        -o-animation: rotation .7s linear infinite;   
}      
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
    }